import { showToast, toCssVal } from "utils/index";
Component({
  options: {
    styleIsolation: "apply-shared",
  },
  properties: {
    sugTop: {
      type: String,
      value: "104",
    },
    value: {
      type: String,
      value: "",
    },
    to: {
      type: String,
      value: "",
    },
    height: {
      type: String,
      value: "80",
    },
    placeholder: {
      type: String,
      value: "请输入搜索内容",
    },
    //输入时是否触发搜索
    inputTriggerSearch: {
      type: Boolean,
      value: false,
    },
    //搜索联想词列表
    sugList: {
      type: Array,
      value: [],
    },
  },

  data: {
    newVal: "",
    style: "",
    list: [
      { id: 1, text: "歌曲名称歌曲名称1歌曲名称1歌曲名称1歌曲名称1歌曲名称11" },
      { id: 2, text: "歌曲名称2" },
      { id: 3, text: "歌曲名称3" },
      { id: 4, text: "歌曲名称4" },
    ],
  },
  observers: {
    value(newVal) {
      this.setData({
        newVal,
      });
    },
    height(newVal) {
      this.setData({
        style: `height:${toCssVal(newVal)}`,
      });
    },
  },
  attached() {
    const { value, height } = this.data;
    this.setData({
      newVal: value,
      style: `height:${toCssVal(height)}`,
    });
  },
  methods: {
    onItem(e) {
      const { to } = this.data;
      if (to) {
        wx.navigateTo({
          url: to,
        });
      } else {
        //   const { id } = e.currentTarget.dataset;
        console.log(id);
      }
    },
    onInput(e) {
      const value = e.detail.value.trim();
      this.setData({ value });
      this.data.inputTriggerSearch && this.onSearch();
      this.triggerEvent("input", value);
    },
    onSearch(e) {
      const value = e.detail.value.trim();
      if (value) {
        this.triggerEvent("search", value);
      } else {
        showToast("请输入搜索内容");
      }
    },
    onClear() {
      this.setData({
        newVal: "",
      });
      this.triggerEvent("clear");
    },
    onSugItem(e) {
      const info = e.detail;
      this.triggerEvent("sugItem", info);
    },
  },
});
